<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>父组件向子组件通信</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>-->
    <script type="text/javascript" src="../../js/vue.global.js"></script>

</head>
<body>
<!--vue 应用实例挂载到此ID上，这样它及其下面的标签才能使用 vue 语法获取数据-->
<div id="rootApp" style="margin: 50px">
    <p>父组件向子组件通信-基本类型</p>
    <!-- 使用组件，将父组件中的 msg 传递给子组件中的 title -->
    <counter1 :title="msg"></counter1>

    <p>父组件向子组件通信-对象类型</p>
    <!-- 使用组件，将父组件中的 students 传递给子组件中的 items -->
    <counter2 :items="students"></counter2>
</div>
</body>

<script type="text/javascript">
    // 定义组件
    const counter1 = {
        template: "<h2>{{title}}</h2>",
        // 定义接收父组件的属性，然后在使用组件时传递
        props: ["title"]
    };

    // 定义组件
    const counter2 = {
        template: `<ul>
            <li v-for="(student,index) in items" :key="'num_' + item">{{index +1}} 姓名：{{student.name}} , 年龄: {{student.age}}</li>
            </ul>`,
        // 定义接收父组件的属性，然后在使用组件时传递
        props: {
            items: {
                // 数据类型，如果是数组则是Array，如果是对象则是Object
                type: Array,
                // 默认值
                default: {}
            }
        }
    };

    // 1、每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始, 用来在应用中注册"全局"组件
    // 2、传递给 createApp 的选项用于配置根组件
    // 3、应用实例暴露的大多数方法都会返回该同一实例，方便链式编程
    const App = Vue.createApp({
        data() {
            return {
                msg: "父组件传递的内容：蚩尤后裔",
                students: [{"name": "张三", "age": "15"}, {"name": "李四", "age": "17"}, {"name": "王五", "age": "16"}]
            }
        }
    });

    // 全局注册组件：在所有 Vue 实例中都可以使用.
    App.component("counter1", counter1);
    App.component("counter2", counter2);

    // 一个应用需要被挂载(mount)到一个 DOM 元素中，当挂载(mount)应用时，该组件被用作渲染的起点
    const rootViewModel = App.mount("#rootApp");

</script>
</html>
